<template>
  <div ref="dom" class="charts chart-china"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)

export default {
  name: 'ChartChina',

  props: {
    value: Array,
    color: Array,
    text: String,
    subtext: String
  },

  data () {
    return {
      dom: null
    }
  },

  methods: {
    resize () {
      this.dom.resize()
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.initChina()
    })
  },

  watch: {
    value: {
      // immediate: true,
      handler (val, oldVal) {
        this.value = val
        this.initChina()
      }
    }
  },

  methods: {
    initChina () {
      let legend = this.value.map(_ => _.name)
      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'left'
        },
        tooltip: {
          trigger: 'item'
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'right',
        //   data: legend
        // },
        color: this.color,
        series: [
          {
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true,
                color: '#000'
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#CFE3E8',
                borderColor: '#fff',
                borderWidth: '1.5'
              },
              emphasis: {
                show: true,
                color: '#fff',
                areaColor: '#8ECDDC'
              }
            },
            data: this.value
          }
        ]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    }
  },

  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
